<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-修改密码</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<style type="text/css">
	div
	{
		margin-top:10%
	}
	/*设置邮箱框，新密码框，确认新密码框，提交按钮的样式*/
	[name="userEmail"],[name="newUserPwd"],[name="newUserPwd1"],input[type="submit"]
	{
		width:350px;
		height:45px;
		font-size:20px
	}
</style>
<script>
	//获得其他页面跳转过来时携带的信息
	var msg="${param.msg}";
	//自执行函数
	$(function()
	{
		//给页面标题赋值
		if(msg=="getBack") document.title="克里斯笔记-找回密码"
		else if(msg=="change") document.title="克里斯笔记-修改密码";
		//如果是修改密码，则电子邮箱输入框不可编辑
		if(msg=="change") $("[name='userEmail']")[0].disabled=true;
	});
	//提交修改用户密码
	function changeUserPwd()
	{
		//验证电子邮箱是否符合规范
		if(!checkEmail()) return false;
		//判断密码是否符合规范
		value=$("[name='newUserPwd']").val();
		if(value=="")
		{
			alert("请输入密码！");
			return false;
		}
		//判断密码是否符合规范的正则表达式，长度6~16，由数字和字母组成
		regex=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
		if(!regex.test(value))
		{
			alert("密码长度必须在6~16之间，包含数字和字母！")
			return false;
		}
		//判断两次输入的密码是否一致
		if(value!=$("[name='newUserPwd1']").val())
		{
			alert("两次输入的密码不一致！");
			return false;
		}
		//提交修改之前，设置电子邮箱框可以编辑，以免后端无法接收数据
		if(msg=="change") $("[name='userEmail']")[0].disabled=false;
		//提交修改
		$.ajax(
		{
			url:"${pageContext.request.contextPath}/changeUserPwd",
			type:"post",
			data:$("#changeUserPwdForm").serialize(),
			dataType:"text",
			success:function(data)
			{
				if(data=="infoError") alert("修改信息错误！");
				else if(data=="userEmailRegistered") alert("该电子邮箱已被注册！");
				else if(data=="noEmailCheckCode") alert("请先获取邮箱验证码！");
				else if(data=="emailCheckCodeExpired") alert("邮箱验证码已过期！");
				else if(data=="emailCheckCodeError") alert("邮箱验证码错误！");
				else if(data=="sameUserPwd") alert("新密码不能和旧密码相同！");
				else if(data=="failed") alert("修改失败！");
				else if(data=="success")
				{
					alert("修改成功！");
					location.href="${pageContext.request.contextPath}/personalCenter";
				}
			}
		});
		return false;
	}
	//获取邮箱验证码
	function getEmailCheckCode()
	{
		//验证电子邮箱是否符合规范
		if(!checkEmail()) return;
		$.ajax(
		{
			url:"${pageContext.request.contextPath}/getEmailCheckCode",
			type:"post",
			data:JSON.stringify({userEmail:$("[name='userEmail']").val()}),
			contentType:"application/json;charset=UTF-8",
			dataType:"text",
			success:function(data)
			{
				if(data=="infoError") alert("电子邮箱格式不合法！");
				else if(data=="success") alert("邮箱验证码获取成功！");
				else if(data!="") alert("请等待"+(60-data)+"秒后获取！");
			}
		});
	}
	//验证电子邮箱输入框
	function checkEmail()
	{
		//验证电子邮箱是否为空
		var value=$("[name='userEmail']").val();
		if(value=="")
		{
			alert("请输入电子邮箱！");
			return false;
		}
		//验证电子邮箱格式的正则表达式
		var regex=/^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
		if(!regex.test(value))
		{
			alert("电子邮箱格式不合法！");
			return false;
		}
		return true;
	}
</script>
</head>
<body>
	<div align="center">
		<form action="${pageContext.request.contextPath}/changeUserPwd" method="post" id="changeUserPwdForm">
			<input type="text" name="userEmail" value="${sessionScope.user.userEmail}" placeholder="电子邮箱"/><br/><br/>
			<input type="text" name="emailCheckCode" style="width:246px;height:45px;font-size:20px" placeholder="邮箱验证码"/>
			<input type="button" value="点击获取" style="width:100px;height:45px;font-size:20px" onclick="getEmailCheckCode()"/><br/><br/>
			<input type="password" name="newUserPwd" placeholder="新密码"/><br/><br/>
			<input type="password" name="newUserPwd1" placeholder="确认新密码"/><br/><br/>
			<input type="submit" value="提交修改" onclick="return changeUserPwd()"/>
		</form>
	</div>
</body>
</html>